import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

typedef callBack = void Function(String sort, bool isCoupon);
// ignore: must_be_immutable
class ScreenTab extends StatefulWidget {
  ScreenTab(
      {
        Key key,
         this.onFunction
      }):super(key:key);

  Function(String sort, bool isCoupon) onFunction;

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ScreenTabState();
  }
}

class _ScreenTabState extends State<ScreenTab> {
  //刷选索引
  int screenIndex = 1;

  //刷选 方向 true 向上，false 向下
  bool screenDirection = true;

  //string
  String sort = "";
  bool isCoupon=true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Flex(
      direction: Axis.horizontal,
      children: <Widget>[
        _screenItem(1, "推荐", false),
        _screenItem(2, "佣金", true),
        _screenItem(3, "价格", true),
        _screenItem(4, "销量", true),
        _screenItem(5, "有券", false),
      ],
    );
  }

  Widget _screenItem(int index, String title, bool showIcon) {
    TextStyle notSelect =
        TextStyle(fontSize: 13.0, color: Color.fromRGBO(152, 152, 152, 1));
    TextStyle onSelect = TextStyle(
        fontSize: 14.0, fontWeight: FontWeight.bold, color: Colors.black);
    TextStyle select = this.screenIndex == index ? onSelect : notSelect;
    Color noColor = Color.fromRGBO(179, 179, 179, 1);
    Color onColor = Colors.black;
    Color color1 = noColor;
    Color color2 = noColor;
    if (showIcon && this.screenIndex == index) {
      if (this.screenDirection) {
        //点击向上
        color1 = onColor;
      } else {
        // 向下
        color2 = onColor;
      }
    }
    return new Expanded(
      child: new Container(
        alignment: Alignment.center,
        child: new InkWell(
          child: new Container(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  title,
                  style: select,
                ),
                new SizedBox(
                  width: 5,
                ),
                showIcon
                    ? new Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Icon(
                            new IconData(
                              0xe643,
                              fontFamily: "aly",
                            ),
                            size: 12.0,
                            color: color1,
                          ),
                          new Icon(
                            new IconData(
                              0xe642,
                              fontFamily: "aly",
                            ),
                            size: 12.0,
                            color: color2,
                          ),
                        ],
                      )
                    : new SizedBox(),
              ],
            ),
          ),
          onTap: () {
            //如果当前点击的是 和上一次一样的  并且   showIcon true 的
            if (this.screenIndex == index && showIcon) {
              setState(() {
                this.screenDirection = !this.screenDirection;
              });
            } else {
              setState(() {
                this.screenIndex = index;
                this.screenDirection = true;
              });
            }


            if (index == 1) {
              sort = "";
            } else if (index == 2) {
              if (this.screenDirection) {
                sort = "commission_rate_desc";
              } else {
                sort = "commission_rate_asc";
              }
            } else if (index == 3) {
              if (this.screenDirection) {
                sort = "price_desc";
              } else {
                sort = "price_asc";
              }
            } else if (index == 4) {
              if (this.screenDirection) {
                sort = "sale_num_desc";
              } else {
                sort = "sale_num_asc";
              }
            } else if (index == 5) {
              isCoupon = !isCoupon;
            }
            widget.onFunction(sort,isCoupon);
          },
        ),
      ),
      flex: 1,
    );
  }


}
